<style lang="scss" scoped>
</style>

<template>
  <el-dialog v-model="visible" title="新增订单" @close="handleClose" width="600px">
    <div class="modal_content">
      <el-form :model="handleForm" ref="formRef" label-width="100">
        <el-form-item label="出通单号">
          <el-input v-model="handleForm.shippingOrderNumber" placeholder="请输入出通单号"/>
        </el-form-item>
        <el-form-item label="业务部门">
          <el-input v-model="handleForm.businessDepartment" placeholder="请输入业务部门"/>
        </el-form-item>
        <el-form-item label="业务人员">
          <el-input v-model="handleForm.businessPersonnel" placeholder="请输入业务人员"/>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="handleForm.consignee" placeholder="请输入收货人"/>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="handleForm.consigneeAddress" placeholder="请输入收获地址"/>
        </el-form-item>
        <el-form-item label="预计出货日期">
          <el-date-picker v-model="handleForm.expectedTime" type="date" placeholder="请输入出货日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="handleForm.orderNumber" placeholder="请输入订单号"/>
        </el-form-item>
        <el-form-item label="订单日期">
          <el-date-picker v-model="handleForm.orderTime" type="date" placeholder="请输入订单日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="handleForm.phone" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品总体积" prop="productVolume">
              <el-input class="all_width" style="width: 200px;" v-model="handleForm.productVolume"  placeholder="请输入产品总体积"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总方数" prop="totalSquare">
              <el-input class="all_width" style="width: 200px;" v-model="handleForm.totalSquare" placeholder="请输入总方数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="handleForm.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="modal-btn-list">
        <div>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary"  @click="submitForm(formRef)">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineEmits, getCurrentInstance } from "vue";
import {postAddShipping} from "@/api/outOrder.js"

const formRef = ref();
const visible = ref(false);
const detailType = ref("");
// 控制是否禁用
const isDisabled = ref(false);
const emit = defineEmits(["ok"]);
let handleForm = reactive({
  businessDepartment:'',
  businessPersonnel:'',
  consignee:'',
  consigneeAddress:'',
  expectedTime:'',
  orderNumber:'',
  orderTime:'',
  phone:'',
  productVolume:'',
  totalSquare:'',
  shippingOrderNumber:'',
});

// 打开
const getParent = (type, item) => {
  console.log(type);
  detailType.value = type;
  isDisabled.value = false;
  visible.value = true;
};

const submitForm = async (form) => {
  try {
    await form.validate();
    await postAddShipping(handleForm);
    handleClose();
    console.log('表单验证通过，接口调用成功');
    emit("ok")
  } catch (error) {
    console.error('表单验证失败或接口调用失败', error);
  }
};
// 关闭
const handleClose = () => {
  formRef.value.resetFields();
  visible.value = false;
  location.reload()
};

defineExpose({
  getParent,
});
</script>
